<template>
    <view class="sign_in_box" v-show="loadFinish">
        <view class="title">
            <view class="title_left">
                本周已连续签到<span>{{signNum}}</span>天
            </view>
            <view class="title_right">连续签到奖励更丰富</view>
        </view>
        <view class="list">
            <div class="li" :class="{'li_active':li.isSign}" v-for="(li,key) in dateList" :key="key">
                <div class="img"></div>
                <div class="txt">{{li.txt}}</div>
            </div>
        </view>
        <div v-if="toadyIsSign" class="pub_btn pub_btn_no">已签到</div>
        <div v-else class="pub_btn" @click="toSign">立即签到</div>
    </view>
</template>

<script>
export default {
    props: {

    },
    data() {
        return {
            signNum: 0,
            toadyIsSign: false,
            dateList: [],
            loadFinish: false
        };
    },
    computed: {},
    watch: {},
    mounted() {
        this.getSignInfo()
    },
    methods: {
        async getSignInfo() {
            const res_1 = await this.$request.get('user/getSignInfo');
            this.loadFinish = true
            if (res_1.code == 200) {
                this.signNum = res_1.result?.seriesSignCount || 0;
                const signTxt = res_1.result?.signInfo || '';
                this.dealDateList(signTxt)
            }
        },
        dealDateList(signTxt) {
            const signList = signTxt.split(',')
            console.log("signList", signList);

            const today = new Date();
            let dayOfWeek = today.getDay(); // 返回0（周日）到6（周六）的数字
            dayOfWeek = dayOfWeek == 0 ? 6 : dayOfWeek - 1;
            const weekList = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            const dateList = []
            weekList.forEach((item, key) => {
                let txt = item
                const isToday = dayOfWeek === key
                if(isToday) txt = '今天'
                const isTomorrow = dayOfWeek + 1 === key
                if(isTomorrow) txt = '明天'
                const isSign = signList.includes(String(key + 1))
                if (isToday) {
                    this.toadyIsSign = isSign
                }
                dateList.push({
                    txt: txt,
                    isSign: isSign,
                })
            })
            this.dateList = dateList
        },
        async toSign() {
            this.$comFun.openLoading();
            const res = await this.$request.get('user/sign', {});
            // console.log(res);
            this.$comFun.closeLoading();
            if (res.code == 200) {
                this.$comFun.toast('签到成功');
                this.getSignInfo()
                this.$emit('refresh')
            } else {
                this.$comFun.toast(res.message);
            }
        }
    },
};
</script>

<style lang="scss" scoped>
.sign_in_box {
    width: calc(100% - 60rpx);
    margin: 20rpx auto;
    background-color: #fff;
    border-radius: 30rpx;
    padding: 30rpx;
    .title {
        height: 50rpx;
        display: flex;
        justify-content: space-between;
        .title_left {
            line-height: 50rpx;
            font-size: 28rpx;
            color: #333;
            font-weight: bold;

            span {
                font-size: 24rpx;
                color: #fab005;
                font-size: 32rpx;
                padding: 0 4rpx;
            }
        }
        .title_right {
            color: #999;
            font-size: 24rpx;
            line-height: 50rpx;
        }
    }
    .list {
        display: flex;
        justify-content: space-between;
        margin: 30rpx 0 40rpx 0;
        height: 116rpx;
        .li {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #f1f2f6;
            width: 80rpx;
            padding: 10rpx 0 16rpx 0;
            border-radius: 12rpx;
            .img {
                width: 50rpx;
                height: 50rpx;
                border-radius: 50%;
                background: url("@/static/bimg/img_53.png") top 41% center
                    no-repeat;
                background-size: 180rpx;
                margin-bottom: 10rpx;
                &.active {
                    background-color: #ffe49e;
                }
            }
            .txt {
                font-size: 24rpx;
                color: #888;
                line-height: 30rpx;
            }
        }
        .li_active {
            background-image: linear-gradient(#e7332c, #ea5b55);
            .img {
                background: url("@/static/bimg/img_54.png") center no-repeat;
                background-size: 50rpx;
            }
            .txt {
                color: #fff;
            }
        }
    }
}
</style>
